
import React from 'react';
import css from './index.less';
import PropTypes from 'prop-types';

export default class Stroke extends React.Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    mod: PropTypes.object,
    type: PropTypes.string,
    value: PropTypes.number,
    label: PropTypes.string,
  };

  static defaultProps = {
    mod: {},
    type: 'number',
    value: 0,
    label: '',
  };

  changeNum(e) {
    let val = parseFloat(e.target.value);
    this.props.mod.update('borderWidth', val);
    this.props.mod.update('textStrokeWidth', val);

  }
  addNumber() {
    const { mod, label } = this.props;
    mod.addNumber(label);
  }
  decNumber() {
    const { mod, label } = this.props;
    mod.decNumber(label);
  }

  selStyle() {
    const { mod } = this.props;
    let ind = this.refs.sel.selectedIndex;
    if (mod.label === '图片' || mod.label === '矩形' || mod.label === '圆形') {
      switch (ind) {
        case 0 : mod.update('borderStyle', 'none'); break;
        case 1 : mod.update('borderStyle', 'solid'); break;
        case 2 : mod.update('borderStyle', 'dashed'); break;
        case 3 : mod.update('borderStyle', 'dotted'); break;
        case 4 : mod.update('borderStyle', 'double'); break;
      }
    } else if (mod.label === '多边形') {
      switch (ind) {
        case 0 : mod.update('dashArray', 'none'); break;
        case 1 : mod.update('dashArray', '5, 5'); break;
        case 2 : mod.update('dashArray', '10, 10'); break;
        case 3 : mod.update('dashArray', '20, 20'); break;
        case 4 : mod.update('dashArray', '20,10,5,5,5,10'); break;
      }
    }
    // console.log('this.refs.sel.option[ind].text', this.refs.sel.options[ind].selected);
    // this.refs.sel.options[ind].setAttribute('label', 'zoho');

  }

  // componentDidMount() {
  //   let ind = this.refs.sel.selectedIndex;
  //   console.log('this.refs.sel.selectedIndex2333', this.refs.sel.options[ind].label);
  //   // let len = this.refs.sel.options.length + 1;
  //   // let opt = this.refs.sel.options;
  //   // if () {
  //   //   for (let i = 0; i < len; i++) {
  //   //     if (opt[i].selected == true || opt[i].selected === true ) {
  //   //       this.refs.sel.options[i].setAttribute('selected', 'true');
  //   //     }
  //   //   }
  //   // }
  //   //
  // }

  render() {
    const { type, value } = this.props;
    return (
      <div className={css.wrap}>
        <div className={css.sel}>
          <select onChange={this.selStyle.bind(this)} ref="sel">
            <option>没线</option>
            <option>实线</option>
            <option>虚线</option>
            <option>点线</option>
            <option>双线</option>
          </select>
          <i />
        </div>
        <div className={css.value}>
          <input type={type}
                 value={value}
                 onChange={this.changeNum.bind(this)} />
          <div>
            <i onMouseDown={this.addNumber.bind(this)}/>
            <i onMouseDown={this.decNumber.bind(this)}/>
          </div>
        </div>

      </div>
    );
  }
}
